@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';

$aligns: 'default', 'center';

.header {
  /* stub for proper typings */
}

.image {
  @include composite-var($modal, 'image');

  display: block;
  width: 100%;
  object-fit: cover;
}

.icon {
  @include composite-var($modal, 'icon-decor');

  display: flex;
  justify-content: center;
}

.headlineLayout {
  @each $align in $aligns {
    &[data-align="#{$align}"] {
      @include composite-var($modal, 'headline-layout', $align);

      display: flex;
      flex-direction: column;

      @if ($align == 'center') {
        align-items: center;
      }
    }
  }
}

.headline {
  @include composite-var($modal-headline);

  display: flex;
  align-items: center;
}

.title {
  display: grid;
}

.subtitle {
  color: $sys-neutral-text-support;
}
